import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:vdrag_saas/Utils.dart';
import 'package:vdrag_saas/model/product.dart';
import 'package:vdrag_saas/detail/use_product.dart';

class DetailHeader extends StatelessWidget {
  Product product;
  DetailHeader({super.key, required this.product});
  final _fontFamily = '思源黑体';

  @override
  Widget build(BuildContext context) {
    var tags = product.tags;
    bool isMobile = Utils.isMobile(context);
    double titleFontSie = isMobile ? 18 : 30;
    double width = isMobile ? 320 : 800;
    var padding = const EdgeInsetsDirectional.fromSTEB(14, 0, 14, 0);
    if (isMobile) {
      padding = const EdgeInsetsDirectional.fromSTEB(10, -5, 10, -5);
    }
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              // mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  product.name,
                  style: TextStyle(
                      fontFamily: _fontFamily,
                      fontSize: titleFontSie,
                      fontWeight: FontWeight.w700,
                      color: const Color(0xff333333)),
                ),
                const Padding(padding: EdgeInsetsDirectional.only(top: 12.0)),
                Row(
                  children: [
                    Row(
                      children: [
                        const Icon(Icons.visibility,
                            color: Color(0xffbbbbbb), size: 12),
                        const Padding(
                            padding: EdgeInsetsDirectional.only(end: 4)),
                        Text(product.viewCount.toString(),
                            style: TextStyle(
                              color: const Color(0xffbbbbbb),
                              fontFamily: _fontFamily,
                              fontSize: 12,
                            ))
                      ],
                    ),
                    const Padding(
                        padding: EdgeInsetsDirectional.only(start: 30.0)),
                    Row(
                      children: [
                        const Icon(Icons.thumb_up_alt,
                            color: Color(0xffbbbbbb), size: 12),
                        Text(product.likeCount.toString(),
                            style: TextStyle(
                              color: const Color(0xffbbbbbb),
                              fontFamily: _fontFamily,
                              fontSize: 12,
                            ))
                      ],
                    ),
                  ],
                ),
              ],
            ),
            Visibility(
              visible: !isMobile,
              child: UseProduct(product),
            )
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
                child: Container(
                    height: 50,
                    constraints: const BoxConstraints(maxWidth: 1300),
                    child: ListView.separated(
                        itemCount: tags.length,
                        // shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        separatorBuilder: (BuildContext context, int index) {
                          return const Padding(
                              padding: EdgeInsetsDirectional.only(end: 8));
                        },
                        itemBuilder: (BuildContext context, int index) {
                          return Chip(
                            label: Text(tags[index]),
                            backgroundColor: const Color(0xffECF5FF),
                            padding: EdgeInsetsDirectional.zero,
                            labelPadding: padding,
                            shape: const RoundedRectangleBorder(
                                side: BorderSide(
                                    color: Color(0xffB3D8FF), width: 1),
                                borderRadius: BorderRadius.zero),
                            labelStyle: TextStyle(
                              fontFamily: _fontFamily,
                              fontSize: 12,
                              color: const Color(0xff409EFF),
                            ),
                          );
                        }))),
          ],
        ),
        const SizedBox(
          width: 1300,
          child: Divider(color: Color(0xffE1E1E1)),
        ),
        const Padding(padding: EdgeInsets.symmetric(vertical: 8))
      ],
    );
  }
}
